<template>
    <div class="login-main" v-show="isShowLogin">
        <!-- header -->
        <header class="login-header">
            <div class="herder-content">
                <div class="header-left">
                    <img src="@/assets/images/logo/logotype.png" />
                </div>
                <div class="header-right">
                    <img src="" />
                    <switchLanguage />
                </div>
            </div>
        </header>
        <!-- login -->
        <div class="login-card">
            <div class="login-content">
                <div class="vim-logo"><img src="@/assets/images/logo/img_logo_login.png" alt="" srcset="" /></div>
                <div class="vim-subTitle">{{ isFirstLogin ? $t('login.newUser') : $t('login.loginTitle') }}</div>
                <div class="login-form">
                    <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                        <div class="login-label">{{ $t('common.password') }} <span style="color: red">*</span></div>
                        <el-form-item prop="password">
                            <el-input id="password" maxlength="64" :type="passwordVisible" v-model="loginForm.password" :placeholder="$t('common.password')">
                                <i id="passwordIcon" slot="suffix" :class="icon" @click="showPass"> </i>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <el-button id="loginButton" type="primary" @click="login">{{ isFirstLogin ? $t('common.SettingButton') : $t('common.loginButton') }}</el-button>
                <div class="login-bottom" v-if="!isFirstLogin">
                    <el-link :underline="false" class="label_forgotPW" type="primary" @click="openForgotPasswordDialog">{{ $t('login.forgotPW') }}</el-link>
                </div>
            </div>
        </div>

        <confirm-dialog ref="forgotPwdRef" :title="$t('login.forgetPasswordLabel1')" @confirm="forgotPwdOk" :confirmText="$t('common.okButton')" :showCancel="false">
            <span>{{ forgotPwdText }}</span>
        </confirm-dialog>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import { getAuthFirstInfo, setAuthFirstPwd } from '@/api/login';
import { submitEncodeMessage} from '@/utils/common';
export default {
    data() {
        // 密码强度验证规则
        const validatePassword = (rule, value, callback) => {
            if (this.isFirstLogin) {
                if (value.length < 8) {
                    callback(new Error(this.$t('errorTips.passwordLength')));
                } else if (!/[a-zA-Z]/.test(value)) {
                    callback(new Error(this.$t('errorTips.passwordLowercaseOrUpperCase')));
                } 
                // else if (!/[A-Z]/.test(value)) {
                //     callback(new Error(this.$t('errorTips.passwordUppercase')));
                // } 
                // else if (!/[^A-Za-z0-9]/.test(value)) {
                //     callback(new Error(this.$t('errorTips.passwordSpecial')));
                // } 
                else {
                    callback();
                }
            } else {
                callback();
            }
        };
        return {
            loginForm: {
                password: '12345678p'
            },
            tipFlag: false,
            passwordVisible: 'password',
            icon: 'el-icon-my-eye-hide',
            loginRules: {
                password: [
                    { required: true, trigger: 'blur', message: this.$t('errorTips.cannotBeEmpty') },
                    { validator: validatePassword, trigger: 'blur' }
                ]
            },

            isShowLogin: false,
            forgotPwdText: '',
            isFirstLogin: false,
        };
    },
    async created() {
        this.forgotPwdText = this.$t('login.forgetPasswordLabel2', { XXX: '6' })
        await this.loadCheckFirst();
    },
    methods: {
        ...mapActions(['LOGIN']),

        async loadCheckFirst(){
            try{
                let {first_login} = await getAuthFirstInfo();
                this.isFirstLogin = first_login == 1;
            } catch (error) {
                console.log(error);
            }
            this.isShowLogin = true;
        },

        async setLoginPwd(){
            try {
                await setAuthFirstPwd(submitEncodeMessage(this.loginForm.password));
                this.$message.success(this.$t('common.success'));
                this.loadCheckFirst();
            } catch (error) {
                console.log(error);
                this.$message.error(this.$t('common.error'));
            }
        },

        async login() {
            this.$refs.loginForm.validate(async (valid) => {
                if (valid) {
                    if(this.isFirstLogin){
                        await this.setLoginPwd();
                    }else{
                        await this.LOGIN({ ...this.loginForm, rememberPassword: false});
                    }
                }
            });
            
        },

        // 密码明文
        showPass() {
            this.passwordVisible = this.passwordVisible === 'text' ? 'password' : 'text';
            this.icon = this.icon === 'el-icon-my-eye-reveal' ? 'el-icon-my-eye-hide' : 'el-icon-my-eye-reveal';
        },

        // 绑定回车事件
        keyDown(e) {
            if (e.keyCode === 13) {
                this.login();
            }
        },

        openForgotPasswordDialog() {
            this.$refs.forgotPwdRef.show();
        },

        forgotPwdOk() {
            this.$refs.forgotPwdRef.hide();
        }
    },

    // 绑定监听事件
    mounted() {
        window.addEventListener('keydown', this.keyDown);
    },

    // 销毁事件
    destroyed() {
        window.removeEventListener('keydown', this.keyDown, false);
    }
};
</script>

<style scoped lang="less">
.login-main {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 320px;
    margin: 0 auto;
    background: @light-bg-secondary;
    transition: @theme-transition;

    .login-header {
        background-color: @light-bg-primary;
        height: 84px;
        box-shadow: 0px 4px 4px 0px @light-shadow;
        transition: @theme-transition;

        .herder-content {
            display: flex;

            max-width: 1273px;
            width: 100%;
            margin: 0 auto;
            height: 100%;

            .header-left {
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;

                img {
                    max-width: 229px;
                    max-height: 100%;
                    width: 90%;
                    object-fit: contain;
                }
            }
            .header-right {
                flex: 1;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .setLans {
                    width: 110px;
                    height: 36px;

                    /deep/ .el-input__inner {
                        background-color: #f2f2f2;
                        height: 36px;
                        border-radius: 4px;
                        color: #000 !important;
                        font-size: 16px;
                    }

                    /deep/ .el-select .el-input .el-select__caret {
                        color: #515151;
                        font-size: 16px;
                    }
                }

                @media (max-width: 640px) {
                    img {
                        display: none;
                    }
                }

                img {
                    max-width: 200px;
                    max-height: 50px;
                    width: 90%;
                    object-fit: contain;
                }
            }
        }
    }

    .login-label {
        margin: 16px 0px;
        font-weight: 600;
    }
    .login-card {
        max-width: 580px;
        max-height: 536px;
        width: 90%;
        height: 90%;
        margin: auto;
        margin-top: 5%;
        padding: 2vw;
        box-sizing: border-box;

        .login-content {
            width: 100%;
            height: 100%;

            .vim-logo {
                width: 200px;
                height: 74px;
                border-radius: 20px;
                margin: 0 auto;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .vim-subTitle {
                font-size: 24px;
                font-family: HarmonyOS Sans Condensed-Bold, HarmonyOS Sans Condensed;
                font-weight: bold;
                color: @light-text-primary;
                line-height: 28px;
                text-align: center;
                margin-top: 30px;
                transition: @theme-transition;
            }
            .login-form {
                margin-top: 41px;
            }
            .login-remPwd {
                margin-top: 15px;
                margin-bottom: 45px;
            }
        }
    }
    .login-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 45px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: @blueColor;
        .label_forgotPW {
            min-width: 140px;
            // margin-left: 16px;
        }
    }
}

/deep/ .el-input__inner {
    max-width: 531px;
    width: 100%;
    height: 56px;
    border-radius: 0px;
}
/deep/ .el-form-item__content {
    margin-bottom: 20px;
}

.el-button {
    max-width: 506px;
    width: 100%;
    height: 56px;
    background-color: @buttonColor;
    border-radius: 56px;
}
/deep/ .el-button--info {
    background-color: @buttonColor;
    border-color: @buttonColor;
    color: rgba(255, 255, 255, 0.9);
    height: 56px;
    width: 120px;
}

.el-icon-my-eye-hide {
    background: url(../../assets/images/eye_hide_new@3.png) center no-repeat;
    background-size: contain;
    width: 24px !important;
    height: 24px !important;
    margin-right: 22px;
    margin-top: 15px;
    cursor: pointer;
}

.el-icon-my-eye-hide:before {
    content: '\u7f51\u7edc';
    font-size: 16px;
    visibility: hidden;
}

.el-icon-my-eye-reveal {
    background: url(../../assets/images/eye_reveal_new@3.png) center no-repeat;
    background-size: contain;
    width: 24px !important;
    height: 24px !important;
    margin-right: 22px;
    margin-top: 15px;
    cursor: pointer;
}
.el-icon-my-eye-reveal:before {
    content: '\u7f51\u7edc';
    font-size: 16px;
    visibility: hidden;
}

/deep/.el-checkbox__inner {
    width: 18px;
    height: 18px;
    border: 2px solid @checkBoxColor;
}

/deep/.el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: @checkBoxColor;
}

/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: @checkBoxColor;
    border-color: @checkBoxColor;
}

/deep/.el-checkbox__inner:after {
    box-sizing: content-box;
    content: '';
    border: 2px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 10px;
    left: 4px;
    position: absolute;
    top: -1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
}

/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #000;
}

/deep/.el-form-item__content .el-input--suffix .el-input__inner {
    padding-right: 60px !important;
}

// 暗模式样式
.theme-dark {
    .login-main {
        background: @dark-bg-primary !important;
        
        .login-header {
            background-color: @dark-bg-secondary !important;
            box-shadow: 0px 4px 4px 0px @dark-shadow !important;
        }
        
        .login-card {
            background: @dark-bg-secondary !important;
            border: 1px solid @dark-border !important;
            
            .login-content {
                .vim-subTitle {
                    color: @dark-text-primary !important;
                }
                
                .login-label {
                    color: @dark-text-primary !important;
                }
            }
        }
        
        .login-bottom {
            color: @blueColor !important;
        }
    }
    
    // 表单元素暗模式
    /deep/ .el-input__inner {
        background: @dark-bg-tertiary !important;
        border-color: @dark-border !important;
        color: @dark-text-primary !important;
        
        &::placeholder {
            color: @dark-text-muted !important;
        }
    }
    
    /deep/ .el-button--primary {
        background-color: @blueColor !important;
        border-color: @blueColor !important;
    }
    
    /deep/ .el-link--primary {
        color: @blueColor !important;
    }
    
    /deep/ .el-checkbox__label {
        color: @dark-text-primary !important;
    }
    
    /deep/ .el-checkbox__inner {
        background: @dark-bg-tertiary !important;
        border-color: @dark-border !important;
    }
    
    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: @blueColor !important;
        border-color: @blueColor !important;
    }
    
    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
        color: @dark-text-primary !important;
    }
    
    // 语言选择器暗模式
    /deep/ .el-input__inner {
        background-color: @dark-bg-tertiary !important;
        color: @dark-text-primary !important;
    }
    
    /deep/ .el-select .el-input .el-select__caret {
        color: @dark-text-secondary !important;
    }
}
</style>
